import { Button, Collapse, Form, Row, Col, Input, message } from 'antd';
import React, { memo, useState, useEffect } from 'react';
import { history } from 'umi';

import styles from './index.less';

import 'moment/locale/zh-cn';
import { viewDict, addDict, editDict } from '@/service/tool/dict';

const { Panel } = Collapse;
const { TextArea } = Input;

const add = memo((props: any) => {
  const [type, setType] = useState<string>();
  const [id, setId] = useState();

  const [form] = Form.useForm<any>();

  // 初始化-详情数据
  const getView = () => {
    viewDict({ id }).then((res: any) => {
      if (res?.success) {
        form.setFieldsValue({
          ...res.data,
        });
      }
    });
  };
  useEffect(() => {
    if (id) {
      getView();
    }
  }, [id]);

  // 根据路由判断当前页面状态
  useEffect(() => {
    // eslint-disable-next-line no-shadow
    const { id } = props.location.query;
    const hrefs = window.location.href;
    if (id) {
      setId(() => id);
    }
    if (hrefs.includes('view')) {
      setType('view');
    } else if (hrefs.includes('add')) {
      setType('add');
    } else if (hrefs.includes('edit')) {
      setType('edit');
    } else {
      setType('process');
    }
  }, []);

  const customizeHeader = (value: string) => (
    <div>
      <div className={styles.tip} />
      {value}
    </div>
  );
  // eslint-disable-next-line consistent-return
  const submit = async () => {
    const formData = await form.validateFields();
    if (!id) {
      addDict(formData).then((res: any) => {
        if (res?.success) {
          message.success(res.msg);
          history.goBack();
        }
      });
    } else {
      editDict({ ...formData, id }).then((res: any) => {
        if (res?.success) {
          message.success(res.msg);
          history.goBack();
        }
      });
    }
  };

  return (
    <div className={styles.admittanceAdd}>
      <div className={`${styles.content} ${styles.formDetils}`}>
        <Form
          form={form}
          name="basic"
          layout="horizontal"
          labelCol={{ flex: '100px' }}
          labelAlign="right"
          labelWrap
          initialValues={{ remember: true }}
          autoComplete="off"
          disabled={type === 'view'}
        >
          <Collapse
            defaultActiveKey={['1', '2']}
            ghost
            expandIconPosition="end"
          >
            <Panel header={customizeHeader('基础信息')} key="1">
              <Row gutter={12}>
                <Col sm={{ span: 24 }} md={{ span: 12 }} lg={{ span: 8 }}>
                  <Form.Item
                    label="字典编号"
                    name="type"
                    rules={[{ required: true }]}
                  >
                    <Input placeholder="请输入" maxLength={60} />
                  </Form.Item>
                </Col>
                <Col sm={{ span: 24 }} md={{ span: 12 }} lg={{ span: 8 }}>
                  <Form.Item
                    label="字典名称"
                    name="valueName"
                    rules={[{ required: true }]}
                  >
                    <Input placeholder="请输入" maxLength={60} />
                  </Form.Item>
                </Col>
              </Row>
            </Panel>
            <Panel header={customizeHeader('其他信息')} key="2">
              <Row gutter={12}>
                <Col sm={{ span: 24 }} md={{ span: 12 }} lg={{ span: 8 }}>
                  <Form.Item label="字典描述" name="description">
                    <TextArea
                      maxLength={100}
                      placeholder="请输入（最多100个字）"
                      autoSize={{ minRows: 3, maxRows: 3 }}
                    />
                  </Form.Item>
                </Col>
              </Row>
            </Panel>
          </Collapse>
        </Form>
        <div className={styles.wrap}>
          {type === 'add' || type === 'edit' ? (
            <>
              <Button type="primary" htmlType="submit" onClick={submit}>
                保存
              </Button>
            </>
          ) : (
            ''
          )}
          <Button
            onClick={() => {
              history.go(-1);
            }}
          >
            取消
          </Button>
        </div>
      </div>
    </div>
  );
});
export default add;
